* { margin: 0; padding: 0; box-sizing: border-box;-webkit-box-sizing: border-box}
li { list-style: none}
img { vertical-align: top}
a { cursor: pointer}
/*<!--头部-->*/
header { height: 50px; position: fixed; top: 0; left: 0;
    width: 100%;background-color:#333;
    background-color:rgba(0,0,0,0.5) ;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    line-height: 50px;
     color: #fff;
}

.menu { display: none;  width: 100px; cursor: pointer; text-align: center}
h1 { margin-left: 50px;overflow:hidden;flex-shrink: 0;width: 150px;}
.logo { width: 100%; height: 50px; float:left;  background: url("../images/logo.png") center no-repeat;
    font-size: 60px; line-height: 99999px; text-indent: 9999px; background-size: 100% auto  }
header  nav {  }
header  nav ul { display: flex; width:500px; justify-content: space-around;}
header  nav li { }
.login { background-color: transparent; border: none; outline: none; color: #fff;
    cursor: pointer; width: 60px; flex-shrink: 0;}
/*<!--头部结束-->*/

/*大广告*/
.banner { width: 100%; height: 250px; background: url("../images/top-bg.png") center top no-repeat #222;
  background-size: cover;   }

/*小广告*/
.wrap { padding: 10px; display: flex; justify-content: space-between;}
.focus-pic { width:49%; }
.wrap img { width: 100%; height: auto}
.side-pic { width:49%; display: flex; justify-content: space-between;}
.pic-item { width:49%;}

/*商品*/
.product-list {display: flex; justify-content: space-around; flex-wrap: wrap}
.product-list li { width: 23%; margin: 5px 0 10px; padding: 5px; box-shadow: 0 0 5px rgba(0,0,0,.7)}
.product-list .pic { width: 100%}
.product-list .pic img { width: 100%; height: auto;}
.product-list p { line-height: 24px; font-size: 12px;}
.product-list p:nth-of-type(2) { display: flex; justify-content: space-between; }


@media screen and (max-width: 1024px){
    .product-list li { width: 31%;}
}


@media screen and (max-width: 768px){
    .product-list li { width: 45%;}

    .menu { display: block}
    h1 { margin-left: 0;overflow:hidden;}
    .logo {background-size: 80% auto  }

    header  nav {  position: absolute; display: none; left: 0; top: 50px; width: 100%;
        background-color: rgba(0,0,0,.6) }
    header  nav ul { display: block;width: 100%; text-align: center;  }
    header  nav li { border-top: 1px solid rgba(255,255,255,.3) }



    .wrap { padding: 10px; display: flex; justify-content: space-between; flex-wrap: wrap}
    .focus-pic { width:100%; }
    .side-pic { width:100%; margin-top: 10px;}

}


@media screen and (max-width:450px){
    .product-list li { width: 90%;}
    .menu { display: block}

    h1 { margin-left: 0;overflow:hidden;}
    .logo {background-size: 80% auto  }

    header  nav {  position: absolute; display: none; left: 0; top: 50px; width: 100%; background-color: rgba(0,0,0,.6) }
    header  nav ul { display: block;width: 100%; text-align: center;  }
    header  nav li { border-top: 1px solid rgba(255,255,255,.3) }



    .wrap { padding: 10px; display: flex; justify-content: space-between; flex-wrap: wrap}
    .focus-pic { width:100%; }
    .side-pic { width:100%; margin-top: 10px;}

}
